<template>
  <div class="app-container" style="display: flex; width: 100%">
    <Map
      v-if="deviceCategoryList"
      :deviceCategoryList="deviceCategoryList"
      :lineData="
        tableLineData.filter((item) =>
          searchLayerValue.length > 0 && activeTab == 'first'
            ? item.inspLineName.indexOf(String(searchLayerValue)) > -1
            : true
        )
      "
      :dangerData="
        tableDangerData.filter((item) =>
          searchLayerValue.length > 0 && activeTab == 'second'
            ? item.dangerName.indexOf(String(searchLayerValue)) > -1
            : true
        )
      "
      :inspUserPosition="
        currentInspUserPositionData.filter((item) =>
          searchLayerValue.length > 0 && activeTab == 'third'
            ? item.inspUserName.indexOf(String(searchLayerValue)) > -1
            : true
        )
      "
    />
    <Widgets
      v-if="deviceCategoryList"
      :deviceCategoryList="deviceCategoryList"
      @open="f_OpenDialog"
    />
    <div v-if="showLayer" class="content-danger-region">
      <div>
        <div class="title">图层列表</div>
        <div class="search">
          <el-form
            ref="formRef"
            :inline="true"
            size="small"
            label-width="100"
            label-position="left"
          >
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item prop="polygonId">
                  <el-input
                    v-model="searchLayerValue"
                    :placeholder="
                      activeTab == 'first'
                        ? '请输入巡检线路名称搜索'
                        : activeTab == 'second'
                          ? '请输入隐患名称搜索'
                          : '请输入人员姓名搜索'
                    "
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="巡检线路" name="first">
              <el-table
                :data="
                  tableLineData.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'first'
                      ? item.inspLineName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tableLineRef"
                size="small"
                :height="tableHeightLayer - 38"
                highlight-current-row
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                />
                <el-table-column
                  label="线路名称"
                  prop="inspLineName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('line')"
                      v-model="lineCheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="f_ChangeDangerData"
                    ></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="隐患名称" name="second">
              <el-table
                :data="
                  tableDangerData1.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'second'
                      ? item.dangerName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tableDangerRef1"
                size="small"
                highlight-current-row
                :height="tableHeightLayer / 2 - 20"
              >
                <!-- <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                /> -->
                <!-- <el-table-column type="selection" width="50" align="center" /> -->
                <el-table-column
                  label="隐患名称"
                  prop="dangerName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('danger1')"
                      v-model="danger1CheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="f_ChangeDangerData"
                    ></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
              <el-table
                class="mt-[15px]"
                :data="
                  tableDangerData2.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'second'
                      ? item.dangerName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tableDangerRef2"
                size="small"
                highlight-current-row
                :height="tableHeightLayer / 2 - 20"
              >
                <!-- <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                /> -->
                <!-- <el-table-column type="selection" width="50" align="center" /> -->
                <el-table-column
                  label="预警名称"
                  prop="dangerName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('danger2')"
                      v-model="danger2CheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      size="large"
                      @change="f_ChangeDangerData"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="人员轨迹" name="third">
              <el-table
                :data="
                  tablePersonData.filter((item) =>
                    searchLayerValue.length > 0 && activeTab == 'third'
                      ? item.inspUserName.indexOf(String(searchLayerValue)) > -1
                      : true
                  )
                "
                border
                header-row-class-name="table-header"
                ref="tablePersonRef"
                size="small"
                :height="tableHeightLayer - 38"
                highlight-current-row
              >
                <el-table-column
                  type="index"
                  label="序号"
                  width="50"
                  align="center"
                />
                <el-table-column
                  label="在线人员姓名"
                  prop="inspUserName"
                  align="center"
                />
                <el-table-column
                  label="是否显示"
                  prop="dangerName"
                  align="center"
                >
                  <template #header>
                    全选
                    <el-checkbox
                      class="align-bottom"
                      @change="f_ChangeDangerData('person')"
                      v-model="personCheckedValue"
                    ></el-checkbox>
                  </template>
                  <template #default="scope">
                    <el-checkbox
                      v-model="scope.row.checked"
                      @change="f_ChangeDangerData"
                    ></el-checkbox>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { find } from "lodash";
import DangerAPI from "@/api/DangerAPI";
import LineAPI from "@/api/LineAPI";
import moment from "moment";
import Map from "@/views/inspection-plan/line/components/Map/index.vue";
import Widgets from "@/views/inspection-plan/line/components/Widgets/index.vue";
import { useDeviceCategory } from "@/views/inspection-plan/line/hooks/useDeviceCategory";
defineOptions({
  name: "Inspection",
  inheritAttrs: false,
});
const deviceCategoryList = ref();
const showLayer = ref(false);
let searchLayerValue = ref("");
let searchLineValue = ref("");
const tableLineData = ref([]);

const lineCheckedValue = ref(true);
const danger1CheckedValue = ref(true);
const danger2CheckedValue = ref(true);
const personCheckedValue = ref(true);

const currentInspUserPositionData = ref([]);

const tableDangerData = ref([]);
const tableDangerData1 = ref([]);
const tableDangerData2 = ref([]);
const tablePersonData = ref([]);
const activeTab = ref("first");
let tableHeight = ref(0);
let tableHeightLayer = ref(0);

// 弹框 图层列表
function f_OpenDialog() {
  showLayer.value = !showLayer.value;
}

// change 隐患的勾选
function f_ChangeDangerData(flag) {
  if (flag == "line") {
    tableLineData.value.forEach((item, index) => {
      tableLineData.value[index].checked = lineCheckedValue.value;
    });
  }
  if (flag == "danger1") {
    tableDangerData1.value.forEach((item, index) => {
      tableDangerData1.value[index].checked = danger1CheckedValue.value;
    });
  }
  if (flag == "danger2") {
    tableDangerData2.value.forEach((item, index) => {
      tableDangerData2.value[index].checked = danger2CheckedValue.value;
    });
  }
  if (flag == "person") {
    tablePersonData.value.forEach((item, index) => {
      tablePersonData.value[index].checked = personCheckedValue.value;
    });
    currentInspUserPositionData.value.forEach((item, index) => {
      currentInspUserPositionData.value[index].checked =
        personCheckedValue.value;
    });
  }

  currentInspUserPositionData.value.forEach((item, index) => {
    let isChecked = find(tablePersonData.value, {
      inspUserId: item.inspUserId,
    }).checked;
    currentInspUserPositionData.value[index].checked = isChecked;
  });
  tableDangerData1.value = JSON.parse(JSON.stringify(tableDangerData1.value));
  tableDangerData2.value = JSON.parse(JSON.stringify(tableDangerData2.value));
  tableDangerData.value = tableDangerData1.value.concat(tableDangerData2.value);
  tablePersonData.value = JSON.parse(JSON.stringify(tablePersonData.value));
  tableLineData.value = JSON.parse(JSON.stringify(tableLineData.value));
  currentInspUserPositionData.value = JSON.parse(
    JSON.stringify(currentInspUserPositionData.value)
  );

  // 判断是否全选
  danger1CheckedValue.value = find(tableDangerData1.value, { checked: false })
    ? false
    : true;
  danger2CheckedValue.value = find(tableDangerData2.value, { checked: false })
    ? false
    : true;
  personCheckedValue.value = find(tablePersonData.value, { checked: false })
    ? false
    : true;
  lineCheckedValue.value = find(tableLineData.value, { checked: false })
    ? false
    : true;
}

// 查询 今日巡检人员
function f_HandelQueryPosition() {
  let params = {
    StartTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
  };
  DangerAPI.api_insp_task_user(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tablePersonData.value = data;
      tablePersonData.value.forEach((item, index) => {
        tablePersonData.value[index].checked = true;
      });
      f_HandelQueryUserPosition();
    }
  });
}

// 查询当前巡检人员的轨迹
function f_HandelQueryUserPosition() {
  let params = {
    StartTime: moment(new Date()).format("YYYY-MM-DD 00:00:00"),
    EndTime: moment(new Date()).format("YYYY-MM-DD 23:59:59"),
    // InspUserIds: inspUserId,
  };
  DangerAPI.api_insp_task_user_position(params).then(({ data, succeeded }) => {
    if (succeeded) {
      currentInspUserPositionData.value = data;
      currentInspUserPositionData.value.forEach((item, index) => {
        currentInspUserPositionData.value[index].checked = true;
      });
    }
  });
}

// 查询 巡检线路
function f_HandelQueryLine() {
  let params = {
    pageSize: 100,
    pageIndex: 1,
  };
  LineAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tableLineData.value = data.items.map((item: any) => {
        let tempArr = [];
        if (item.jsonLine.length) {
          JSON.parse(item.jsonLine).coordinates.forEach((ele, eleIndex) => {
            tempArr.push([ele[1], ele[0]]);
          });
        }
        item.checked = true;
        return {
          ...item,
          latlngs: tempArr,
        };
      });
    }
  });
}

// 查询 隐患名称
function f_HandelQueryDanger() {
  let params = {
    pageIndex: 1,
    pageSize: 10000,
  };
  tableDangerData1.value = [];
  tableDangerData2.value = [];
  DangerAPI.api_query(params).then(({ data, succeeded }) => {
    if (succeeded) {
      tableDangerData.value = data.items.map((item: any) => {
        const { coordinates } = JSON.parse(item.jsonPoint);
        item.checked = true;
        return {
          ...item,
          latlng: [coordinates[1], coordinates[0]],
        };
      });
      tableDangerData.value.forEach((item) => {
        if (item.status == 0) {
          tableDangerData2.value.push(item);
        } else {
          tableDangerData1.value.push(item);
        }
      });
    }
  });
}

onBeforeMount(async () => {
  deviceCategoryList.value = await useDeviceCategory();
});

onMounted(() => {
  tableHeight.value = window.innerHeight - 316;
  tableHeightLayer.value = window.innerHeight - 370;
  f_HandelQueryLine();
  f_HandelQueryDanger();
  f_HandelQueryPosition();
});
</script>
<style scoped lang="scss">
.app-container {
  overflow: hidden;
  position: relative;
}
.content-danger-region {
  position: absolute;
  top: 120px;
  right: 0;
  z-index: 1000;
  width: 560px;
  height: calc(100% - 150px);
  background: #ffffffa1;

  > div {
    width: 100%;
  }

  .title {
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #1990ff, #1990ff);
  }

  .search {
    padding: 12px 12px 0;
  }

  .table {
    width: 100%;
    padding: 0 12px 12px;
  }

  :deep .el-form--inline .el-form-item {
    width: 100%;
  }

  :deep .el-tabs {
    padding: 0 10px;
    background: #fff;
  }
}
</style>
